@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>设计团队</h5>
        </div>
        <div class="ibox-content">
            <div class="row m-b">
                <div class="col-lg-8">
                    <a href="{{url('admin/team/designer-add')}}" class="btn btn-w-m btn-warning m-r-xs"><i class="fa fa-plus"></i> 添加设计师</a>
                </div>
                <div class="col-lg-4">
                    <form id="searchForm">
                        <div class="input-group">
                            <input type="text" name="kw" placeholder="请输入姓名" class="form-control">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-primary">搜索</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="table-responsive">
                <table id="tblDataList" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th width="50">#</th>
                            <th>姓名</th>
                            <th>职位</th>
                            <th>经验</th>
                            <th>费用</th>
                            <th>擅长</th>
                            <th><a data-toggle="tooltip" data-placement="top" title="头像">头像</a></th>
                            <th><a data-toggle="tooltip" data-placement="top" title="审核">审核</a></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div id="pagination" class="text-center"></div>
            </div>
        </div>
    </div>
</div>

<script id="tplDataList" type="text/html">
    @{{each rows row i}}
    <tr data-id="@{{row.id}}">
        <td>@{{i+1}}</td>
        <td>
            @{{row.realname}}
            @{{if row.sex == '男'}}
            <i class="fa fa-mars text-success"></i>
            @{{else}}
            <i class="fa fa-venus text-danger"></i>
            @{{/if}}
        </td>
        <td>@{{row.post}}</td>
        <td>@{{row.experience}}</td>
        <td>@{{row.cost}}</td>
        <td>@{{row.goodat}}</td>
        <td>
            <a href="javascript:;" class="js-pic1" data-src="@{{row.headimg}}">
                @{{if row.headimg}}
                <i class="fa fa-file-image-o fa-lg"></i>
                @{{else}}
                <i class="fa fa-cloud-upload fa-lg"></i>
                @{{/if}}
            </a>
        </td>
        <td>
            <a href="javascript:;" class="js-status">
                @{{if row.status}}
                <i class="fa fa-check text-navy"></i>
                @{{else}}
                <i class="fa fa-ban text-danger"></i>
                @{{/if}}
            </a>
        </td>
        <td>
            <a href="{{url('admin/team/designer-edit')}}?id=@{{row.id}}" class="m-r-xs">
                <i class="fa fa-pencil-square fa-lg"></i>编辑
            </a>
            <a href="javascript:;" class="js-del">
                <i class="fa fa-times-circle fa-lg"></i>删除
            </a>
        </td>
    </tr>
    @{{/each}}
</script>

<script id="tplUploadPic1" type="text/html">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title">图片上传</h4>
            </div>
            <div class="row modal-body">
                <form id="formUppic1" method="post" enctype="multipart/form-data" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">选择图片</label>
                        <div class="col-sm-5">
                            <input name="pic" type="file" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <input type="hidden" name="id"  value="@{{id}}" />
                            <button type="submit" class="btn btn-primary btn-w-m"><i class="fa fa-cloud-upload"></i> 上传图片</button>
                            <button type="button" class="btn btn-danger m-l" onclick="deletePic1(@{{id}})"><i class="fa fa-trash"></i> 删除图片</button>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">预览</label>
                        <div id="pictureViewer" class="col-sm-10">
                            @{{if src}}
                            <img src="@{{src}}" class="img-thumbnail" />
                            @{{else}}
                            <img src="/assets/images/blank.gif" class="img-thumbnail" />
                            @{{/if}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</script>
@endsection

@section('pagescript')
<script>
    $("#side-menu li[rel='team']").addClass("active")
        .parents("ul").addClass("in").parents("li").addClass("active");

    var filter = {"kw":"","page":1,"limit":20};
    var RenderPageList = function(){
        $.get("{{url('admin/team/designer-page-rows')}}", filter, function(data){
            $("#tblDataList tbody").html(template("tplDataList", data));
            $("#pagination").html(page(data.page_count, data.total_rows, data.page));
        }).fail(failure);
    };

    $("#pagination").delegate("li a", "click", function(){
        filter.page = $(this).attr("rel");
        RenderPageList();
    });

    $("#searchForm").submit(function(){
        filter.kw = this.kw.value;
        filter.page = 1;
        RenderPageList();
        return false;
    });

    $("#tblDataList").delegate(".js-status", "click", function(){
        var obj = $(this).find('i'),
            id = $(this).parents('tr').eq(0).data('id'),
            status = obj.hasClass('fa-check') ? 0 : 1;
        obj.attr('class', 'fa fa-refresh animated rotateIn');
        $.post("{{url('admin/team/designer-update')}}", {'id':id,'status':status}, function(){
            if(status){
                obj.attr("class", 'fa fa-check text-navy');
            }else{
                obj.attr("class", 'fa fa-ban text-danger');
            }
        }).fail(failure);
    });

    $("#tblDataList").delegate('.js-pic1', 'click', function(){
        var data = {
            'id': $(this).parents('tr').eq(0).data("id"),
            'src': $(this).data("src")
        };
        $("#modalDialog").html(template("tplUploadPic1", data)).modal('show');
        return false;
    });

    $("#modalDialog").delegate("#formUppic1", 'submit', function(){
        var id = this.id.value,
            file = this.pic.value;
        if (file == ""){
            alert("请选择上传文件！");
            return false;
        }
        if (file.lastIndexOf(".") == -1){
            alert("文件类型不正确！");
            return false;
        }
        var ext = file.substr(file.lastIndexOf(".") + 1).toLowerCase();
        if (ext != 'jpg' && ext != 'jpeg' && ext != 'gif' && ext != 'png'){
            alert('图片必须是 JPG、JPEG、GIF 或者 PNG 格式！');
            return false;
        }
        var data = new FormData();
        data.append('id', id);
        data.append('pic', this.pic.files[0]);
        uploadPic1(data, function(result){
            $("#pictureViewer img").eq(0).attr("src", result);
            var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
                ta = tr.find(".js-pic1").eq(0);
            ta.data("src", result);
            ta.find("i").removeClass("fa-cloud-upload").addClass("fa-file-image-o");
        }, failure);
        return false;
    });

    var uploadPic1 = function(data, result, fail){
        $.ajax("{{url('admin/team/upload-headimg')}}", {
            type: "post",
            data: data,
            dataType: 'json',
            processData: false,
            contentType: false,
            beforeSend: function () {
                $("#loadingMask").fadeIn();
            },
            complete: function () {
                $("#loadingMask").fadeOut();
            },
            success: result,
            error: fail
        });
    };

    var deletePic1 = function(id){
        if(confirm("确定要删除此图片吗？")){
            $.post("{{url('admin/team/remove-headimg')}}", {"id":id}, function(){
                $("#pictureViewer img").eq(0).attr("src", "/assets/images/blank.gif");
                var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
                    ta = tr.find(".js-pic1").eq(0);
                ta.data("src", "");
                ta.find("i").removeClass("fa-file-image-o").addClass("fa-cloud-upload");
            }).fail(failure);
        }
    };

    $("#tblDataList").delegate(".js-del", "click", function(e){
        var id = $(this).parents('tr').eq(0).data("id");
        layer.confirm('确定要删除此记录吗？', {icon:3}, function(index){
            $.post("{{url('admin/team/designer-delete')}}", {"id":id}, function(){
                $(e.target).parents("tr").eq(0).remove();
                layer.close(index);
            }).fail(failure);
        });
    });

    $(function(){
        $('[data-toggle="tooltip"]').tooltip();
        RenderPageList();
    });
</script>
@endsection
